---
title: Avatar
description: "`Avatar`は、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。"
storybook: components-avatar--basic
source: components/avatar
style: components/avatar/avatar.style.ts
---

```tsx preview
<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>
```

## 使い方

:::code-group

```tsx [package]
import { Avatar, AvatarGroup } from "@yamada-ui/react"
```

```tsx [alias]
import { Avatar, AvatarGroup } from "@/components/ui"
```

```tsx [monorepo]
import { Avatar, AvatarGroup } from "@workspaces/ui"
```

:::

```tsx
<Avatar />
```

```tsx
<AvatarGroup.Root>
  <AvatarGroup.Item />
</AvatarGroup.Root>
```

### バリアントを変更する

```tsx preview
<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant, key) => (
      <Avatar variant={variant} name="Hirotomo Yamada" key={key} />
    )}
  </For>
</Wrap>
```

### サイズを変更する

```tsx preview
<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, key) => <Avatar size={size} name="Hirotomo Yamada" key={key} />}
  </For>
</Wrap>
```

### 形を変える

```tsx preview
<Wrap gap="md">
  <For each={["circle", "square", "rounded"]}>
    {(size, key) => <Avatar shape={size} name="Hirotomo Yamada" key={key} />}
  </For>
</Wrap>
```

### イニシャルを表示する

`name`に文字列を設定すると、イニシャルのアイコンを表示します。

```tsx preview
<Avatar name="Hirotomo Yamada" />
```

### 画像を表示する

画像を表示する場合は、`src`にパスを設定します。

```tsx preview
<Avatar src="https://avatars.githubusercontent.com/u/84060430?v=4" />
```

### フォールバック

`src`の読み込みが失敗した場合は、2つのフォールバックがあります。

- `name`がある場合: イニシャルのアイコンを表示します。
- `name`がない場合: デフォルトのアバターのアイコンを使用します。

```tsx preview
<Wrap gap="md">
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar name="Hirotomo Yamada" src="https://not-found.com" />
  <Avatar src="https://not-found.com" />
</Wrap>
```

### フォールバックをカスタマイズする

```tsx preview
<Wrap gap="md">
  <Avatar bg="warning" src="https://not-found.com" />
  <Avatar icon={<GhostIcon />} src="https://not-found.com" />
</Wrap>
```

### ランダムな色を使う

```tsx preview functional
const randomColorScheme = (name: string) => {
  const index = name.charCodeAt(0) % COLOR_SCHEMES.length
  return COLOR_SCHEMES[index]
}

return (
  <Wrap gap="md">
    <For each={["Hirotomo Yamada", "Koiso Kenji", "Shinohara Natsuki"]}>
      {(name, index) => (
        <Avatar key={index} name={name} colorScheme={randomColorScheme(name)} />
      )}
    </For>
  </Wrap>
)
```

### グループ化する

グループ化する場合は、`max`に数値を指定します。指定された数以上のアバターが存在する場合は、切り詰めて残りのアバターを`+X`のように表示されます。

```tsx preview
<AvatarGroup.Root max={3}>
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
</AvatarGroup.Root>
```

## Props

<PropsTable name="avatar" all omit={["AvatarGroupRoot"]} />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
